<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        td{
            width: 200px;
            text-align: center;
            height: 30px;
        }
        [colspan]{
            background: red;
        }

        select, button {
            height: 30px;
        }
        input{
              height: 24px;
          }

        div{
            margin-bottom: 5px;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

<div id="root">


    <div class="top1">
        <select v-model="select1" v-on:change="getrate">
            <option value="0">美元</option>
            <option value="1">人民币</option>
            <option value="2">欧元</option>
            <option value="3">港元</option>
            <option value="4">日元</option>
            <option value="5">韩币</option>
        </select>
        <button v-on:click="changeselect">互换</button>
        <select v-model="select2" v-on:change="getrate">
            <option value="0">美元</option>
            <option value="1">人民币</option>
            <option value="2">欧元</option>
            <option value="3">港元</option>
            <option value="4">日元</option>
            <option value="5">韩币</option>
        </select>
        <span>数额:</span>
        <input v-model="inputstr">
        <button v-on:click="getrate">汇率换算</button>

    </div>
    <table border="1">
        <tr>
            <td colspan="3">按当前汇率换算结果</td>
        </tr>
        <tr>
            <td>{{td21}}</td>
            <td>汇率</td>
            <td>{{td23}}</td>
        </tr>
        <tr>
            <td>{{td31}}</td>
            <td>{{td32}}</td>
            <td>{{td33}}</td>
        </tr>
    </table>
</div>


    <script>

        new Vue({
            el: "#root",
            data: {
                rate: [1, 7,  1,  7,  148,  1300],
                money: ["美元", "人民币", "欧元", "港元", "日元", "韩币"],
                select1: "0",
                select2: "1",
                inputstr: "",
                td21: "美元",
                td23: "人民币",
                td31: 100,
                td32: 6,
                td33: 600
            },
            methods: {
                changeselect: function () {
                    var temp = this.select1;
                    this.select1 = this.select2;
                    this.select2 = temp;
                },
                getrate: function () {

                    if (this.inputstr == ""){
                        return;
                    }
                    this.td21 = this.money[this.select1];
                    this.td23 = this.money[this.select2];

                    this.td31 = this.inputstr;
                    this.td32 = this.rate[this.select2] /this.rate[this.select1]
                    this.td33 = this.td32 * this.inputstr
                }
            }
        })
    </script>
</body>
</html>
